<template>
    <!--课程目录-->
    <div class="class-contain">
        <ul :class="setting.class">
            <li class="course-page" v-for="page in pageList" :key="page.id">
                <div class="page">
                    <i class="fold-arrow"
                       :class="{active:activePage&&(activePage.id === page.id)}"
                       @click="handleOpenItem(page)"
                    ></i>
                    <div class="page-name" @click="handleOpenItem(page)">{{ page.name }}</div>
                    <div class="progress-box" v-if="setting.energy">
                        <div class="energy-box">
                            <div class="energy-bar" :style="{width:page.status+ '%'}"></div>
                        </div>
                        <span>{{ page.status }}%</span>
                    </div>
                    <div class="btn-box">
                        <a class="btn" @click="handleOpenItem(page)" v-if="setting.startLearn">开始学习</a>
                        <a class="btn" @click="handleDownloadItem(page)" v-if="setting.download">下载附件</a>
                    </div>
                </div>
                <ul class="page-item-list" v-if="activePage&&(activePage.id === page.id)&&setting.class!=='test'">
                    <li v-for="(item,index) in page.item" :key="item.id"
                        :class="{active: item.vid === vid}">
                        <i class="icon-video-play" v-if="setting.class ==='video'">
                            <img src="../../../assets/image/gif/icon-playing.gif" v-if="item.vid === vid"/>
                            <img src="../../../assets/image/icon/u2129.png" v-else/>
                        </i>
                        <p class="item-name" @click="handleEmitVideo(item,page.id)">{{ item.name }}</p>
                        <div class="progress-box" v-if="setting.energy">
                            <div class="energy-box">
                                <div class="energy-bar" :style="{width:item.status+ '%'}"></div>
                            </div>
                            <span>{{ item.status }}%</span>
                        </div>
                        <a class="icon-video" v-if="setting.video" @click="handleWatchVideo(item,index)"></a>
                    </li>
                </ul>
                <ul class="page-item-list" v-if="activePage&&(activePage.id === page.id)&&setting.class=='test'">
                    <li v-for="item in page.item" :key="item.id">
                        <p class="item-name">{{ item.test_name }}</p>
                        <div class="btn-box">
<!--                            <a class="btn" @click="handleJumpHistory(item)" v-if="setting.answerHistory">查看记录</a>-->
                            <a class="btn info" @click="handleJumpStartAnswer(item)" v-if="setting.answer">开始答题</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="no-data" v-if="pageList&&pageList.length ===0">暂无章节信息</li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'courseCatalog',
    components: {
        /**/
    },
    data() {
        return {
            activePage: null,
            pageList: null
        };
    },
    props: {
        courseId: {},
        setting: {
            default: {
                class: 'def'
            }
        },
        cataId: {},
        vid: null,
        chaIndex: {}
    },
    watch: {
        // eslint-disable-next-line no-unused-vars
        courseId(val) {
            this.getPageList();
        }
    },
    mounted() {
        this.getPageList();
    },
    methods: {
        // 章节列表
        getPageList() {
            return this.$api.ajaxData({
                pathName: 'getCourseChaInfoList',
                authorization: true,
                params: {
                    courseId: this.courseId
                }
            }).then(res => {
                this.pageList = res.obj;
                if (this.cataId) {
                    this.activePage = {
                        id: this.cataId
                    };
                    this.$nextTick(() => {
                        this.getItemList(this.activePage);
                    });
                }
            }).catch(() => {
                this.pageList = [];
            });
        },
        // 节列表
        getItemList(page) {
            let that = this;
            let id = page.id;
            let option = {
                pathName: 'getVideoListByChaId',
                authorization: true,
                params: {
                    cha_id: id
                }
            };
            if (this.setting.class === 'test') {
                option = {
                    pathName: 'doChpTestList',
                    authorization: true,
                    method: 'post',
                    data: {
                        chaId: page.id,
                        courseId: this.courseId
                    }
                }
            }
            this.$api.ajaxData(option).then(res => {
                let index = 0;
                that.pageList.forEach((page, i) => {
                    if (page.id == id) {
                        index = i
                    }
                });
                let item = Object.assign(that.pageList[index], {
                    item: res.obj
                });
                that.$set(that.pageList, index, item);
                console.log(that.pageList)
            }).catch(() => {

            });
        },
        // 展开节
        handleOpenItem(obj) {
            if (this.activePage && (this.activePage.id === obj.id)) {
                this.activePage = null;
            } else {
                this.activePage = obj;
                this.getItemList(obj);
            }
        },
        // 查看视频
        handleWatchVideo(video, index) {
            if(!video.video_url) {
                this.$util.alert('视频准备中');
                return
            }
            let routeData = this.$router.resolve({
                name: 'video', query: {
                    type: 3,
                    courseId: this.courseId,
                    chaId: this.activePage.id,
                    index: index
                }
            });
            window.open(routeData.href, '_blank');
        },
        // 切换视频
        handleEmitVideo(video, id) {
            this.$emit('changeVideo', video, id)
        },
        // 下载附件
        handleDownloadItem(obj) {
            let option = {
                pathName: 'getKjUrl',
                authorization: true,
                params: {
                    zid: obj.id
                }
            };
            this.$api.ajaxData(option)
                .then(res => {
                    if (res.obj.length > 0) {
                        this.$util.downloadFile(res.obj[0].url)
                    }
                });
        },
        // 查看答题历史
        handleJumpHistory() {
            let routeData = this.$router.resolve({
                name: 'test', query: {
                    type: 3,
                    course_id: this.courseId,
                    test_type: 1
                }
            });
            window.open(routeData.href, '_blank');
        },
        // 开始答题
        handleJumpStartAnswer(obj) {
            console.log(obj);
            let routeData = this.$router.resolve({
                name: 'test', query: {
                    type: 2,
                    test_id: obj.id,
                    secend_lab_name: obj.secend_lab_name,
                    test_name:obj.test_name,
                    test_type: 1,
                    batch_id: this.$util.dateConverter('yyyyMMddhhmmss'),
                    course_id: obj.course_id
                }
            });
            window.open(routeData.href, '_blank');
        }
    }
};
</script>
<style scoped lang="scss">
.energy-box {
    display: block;
    width: 80%;
    height: 6px;
    border-radius: 3px;
    background: rgba(204, 204, 204, 1);

    .energy-bar {
        height: 6px;
        min-width: 1%;
        border-radius: 3px;
        background: #006ade;
    }
}

ul, li, p {
    margin: 0;
}

.course-page {
    border-bottom: 1px solid #f7f7f7;

    .page {
        display: flex;
        height: 50px;
        padding: 0 20px;
        align-items: center;

        .fold-arrow {
            @include triangle(12px, #ccc, right);
            cursor: pointer;
            transition-duration: 200ms;

            &.active {
                transform: rotate(90deg);
            }
        }

        .page-name {
            flex: 1;
            margin: 0 10px;
            cursor: pointer;
            @include ellipsis-line(1);
        }

        .progress-box {
            display: flex;
            width: 300px;
            flex-shrink: 4;
            align-items: center;

            span {
                margin: 0 0 0 10px;
                color: #a1a1a1;
            }
        }
    }

    .btn-box {
        .btn {
            padding: 0 5px;

            &:not(:first-child) {
                border-left: 1px solid #eee;
            }

            &.info {
                display: inline-block;
                line-height: 24px;
                padding: 0 15px;
                margin-left: 15px;
                border-radius: 12px;
                border-left: none;
                background: #007aff;
                color: #fff;
            }

            &:hover {
                opacity: 0.8;
            }
        }

    }

    .page-item-list {
        li {
            display: flex;
            align-items: center;
            height: 50px;
            padding: 0 40px;
            border-top: 1px solid #f7f7f7;

            .item-name {
                flex: 1;
                cursor: pointer;
                @include ellipsis-line(1);
            }

            .progress-box {
                display: flex;
                align-items: center;
                width: 300px;

                span {
                    margin: 0 0 0 10px;
                    color: #a1a1a1;
                }
            }

            .icon-video {
                display: block;
                width: 15px;
                height: 15px;
                margin: 0 35px;
                background: url("../../../assets/image/icon/u2129.png") no-repeat;
                background-size: cover;
            }
            &.active {
                p {
                    color: #ffba00;
                }
            }
        }
    }
}

.video {
    width: 250px;
    .course-page {
        border-bottom: none;
    }

    .page-item-list {
        li {
            border-top: none;
            height: 35px;
            .icon-video-play {
                margin-right: 10px;
                img {
                    width: 15px;
                    height: 15px;
                }
            }
            .item-name {
                cursor: pointer;
                color: #999;
            }
        }
    }
    .page-name {
        font-size: 16px;
        color: #fff;
    }
}

.no-data {
    padding: 40px;
    text-align: center;
    color: #999;
}
</style>
